<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>后台登录</title>

		<!-- 公共样式 开始 -->
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/admin/base.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/admin/iconfont.css">
		<script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css">
		<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
		<!-- 公共样式 结束 -->
		
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/admin/login/login.css">
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/admin/login.js"></script>
	</head>

	<body>
		<div class="loginBg"></div>
		<div class="login_main">
			<div class="box">
				<div class="left">
					<img src="${pageContext.request.contextPath}/img/admin/logo.png" />
				</div>
				<div class="right">
					<form class="layui-form layui-form-pane" action="${pageContext.request.contextPath}/Admin/login" autocomplete="off">
						<div class="layui-form-item">
							<label class="layui-form-label login_title"><i class="iconfont icon-gerenzhongxin-denglu"></i></label>
							<div class="layui-input-block login_input">
								<input type="text" name="userAccount" required lay-verify="required" autocomplete="off" placeholder="请输入您的用户名" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label login_title"><i class="iconfont icon-mima1"></i></label>
							<div class="layui-input-block login_input">
								<input type="password" name="userPassword" required lay-verify="required" autocomplete="off" placeholder="请输入密码" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<button class="layui-btn layui-btn-fluid login_but" lay-submit lay-filter="loginBut">登 录</button>
						</div>
						<div class="layui-form-item">
							<input type="radio" name="sex" value="admin" title="管理员" checked lay-filter="userType">
							<input type="radio" name="sex" value="技术" title="技术" lay-filter="userType">
							<input type="radio" name="sex" value="实施" title="实施" lay-filter="userType">
						</div>
					</form>
				</div>
			</div>
		</div>
		<script>
			var pathName=window.document.location.pathname;
			var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
			
			layui.use('form', function() {
				var form = layui.form;
				//监听提交
				form.on('submit(loginBut)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return true;
				});
				//监听用户类型，改变风格
				form.on('radio(userType)', function(data){
					if(data.value == "admin"){
						$(".loginBg").css("background","url('"+projectName+"/img/admin/login/login_admin_bg.jpg') no-repeat");
						$(".login_but").css("cssText", "background-color:#57c201 !important");
					}
					if(data.value == "技术"){
						$(".loginBg").css("background","url('"+projectName+"/img/admin/login/login_sh_bg.jpg') no-repeat");
						$(".login_but").css("cssText", "background-color:#16c6f9 !important");
					}
					if(data.value == "实施"){
						$(".loginBg").css("background","url('"+projectName+"/img/admin/login/login_fj_bg.jpg') no-repeat");
						$(".login_but").css("cssText", "background-color:#ffd205 !important");
					}
				});
			});
		</script>
	</body>

</html>